<!-- -->
// TODO 订单统计
<template>
  <div class="statistics">
    <el-container>
      <el-header>
        <el-button type="primary" plain @click="thisWeek()">本周</el-button>
        <el-button type="primary" plain @click="thisMonth()">本月</el-button>
        <el-select v-model="selectYear" placeholder="按年统计">
          <el-option label="2020" value="2020"></el-option>
          <el-option label="2019" value="2019"></el-option>
          <el-option label="2018" value="2018"></el-option>
        </el-select>
        <span>指定日期范围</span>
        <el-date-picker
          v-model="startTime"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
        <span>至</span>
        <el-date-picker
          v-model="endTime"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
        <el-button class="sureButton" type="primary" plain @click="find()">确定</el-button>
      </el-header>
      <el-main>
        <ve-line :data="chartData"></ve-line>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import VeLine from "v-charts/lib/line";
export default {
  name: "Statistics",
  data() {
    return {
      selectYear: "",
      startTime: "",
      endTime: "",
      chartData: {
        columns: ["label", "value"],
        rows: [
          { label: "1月1日", value: 15 },
          { label: "1月2日", value: 5454 },
          { label: "1月3日", value: 454 },
          { label: "1月4日", value: 0 },
          { label: "1月5日", value: 0 },
          { label: "1月6日", value: 0 }
        ]
      }
    };
  },
  watch: {
    selectYear: function(Val) {
      this.thisYear(Val);
    }
  },

  components: { VeLine },

  filters: {},

  computed: {},

  methods: {
    Fail(index) {
      this.$message.error(index);
    },
    Success(index) {
      this.$message.success(index);
    },
    thisWeek() {
      var myDate = new Date();
      var nowTime = myDate.getTime();
      var day = myDate.getDay();
      var oneDayTime = 24 * 60 * 60 * 1000;
      var MondayTime = nowTime - (day - 1) * oneDayTime; //显示周一
      this.endTime = this.getNowFormatDate();
      this.startTime = this.formatDate(new Date(MondayTime));
      console.log(this.startTime);
      console.log(this.endTime);
      this.axios
        .post("/api/orders/statistics", {
          start: this.startTime.toString(),
          end: this.endTime.toString()
        })
        .then(res => {
          console.log(res);
          if (res.data.code === 200) {
            
              this.chartData.rows = res.data.data.list;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    thisMonth() {
      var myDate = new Date();
      var month = myDate.getMonth() + 1;
      this.endTime = this.getNowFormatDate();
      this.startTime = myDate.getFullYear() + "-" + month + "-01";
      console.log(this.startTime);
      this.axios
        .post("/api/orders/statistics", {
          start: this.startTime,
          end: this.endTime
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code === 200) {
            
              this.chartData.rows = res.data.data.list;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    thisYear(Val) {
      this.startTime = Val + "-01-01";
      this.endTime = this.getNowFormatDate();
      this.axios
        .post("/api/orders/statistics", {
          start: this.startTime,
          end: this.endTime
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code === 200) {
            
              this.chartData.rows = res.data.data.list;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    find(){
      this.axios
        .post("/api/orders/countByDate", {
          star_time: this.startTime,
          end_time: this.endTime
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code === 200) {
            if (res.data.data != "") {
              this.chartData.rows = res.data.data;
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    //格式化日期：yyyy-MM-dd
    formatDate(date) {
      var myyear = date.getFullYear();
      var mymonth = date.getMonth() + 1;
      var myweekday = date.getDate();

      if (mymonth < 10) {
        mymonth = "0" + mymonth;
      }
      if (myweekday < 10) {
        myweekday = "0" + myweekday;
      }
      return myyear + "-" + mymonth + "-" + myweekday;
    },
    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    }
  }
};
</script>
<style scoped>
.statistics {
  width: 100%;
  height: 100%;
}
.el-container {
  width: 100%;
  height: 100%;
}
.el-header {
  line-height: 60px;
}
.el-main {
  width: 100%;
  height: 100%;
}
.el-select {
  margin-left: 14px;
  width: 120px;
}
.el-header span {
  margin-left: 14px;
  font-family: "微软雅黑";
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  margin-left: 14px;
  width: 140px;
}
.sureButton {
  margin-left: 14px;
}
</style>